<!--
 * @Author: your name
 * @Date: 2021-11-17 15:53:39
 * @LastEditTime: 2021-11-18 13:03:38
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue_cli_demo5\src\components\CommonHeader.vue
-->
<template>
  <header>
      <!-- 左边 -->
      <div class="l-content">
          <el-button plain icon="el-icon-menu" @click="isCollapseSet"></el-button>
          <h3 style="color: #fff">首页</h3>
      </div>
      <!-- 右边 -->
        <div class="r-content">
         <el-dropdown trigger="click" szie="mini">
            <span class="el-dropdown-link">
                <img :src="userImg" alt="">
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                
            </el-dropdown-menu>
            </el-dropdown>
        </div>
    <!-- <input @click="sendMsg" type="button" value="给父组件传递值"> -->
  </header>
</template>

<script>
import bus from '@/assets/js/eventBus'

export default {
    data() {
        return {
             //将msg传递给父组件
            msg: "我是子组件的msg",
            userImg: require('../assets/images/user.png'),
            isCollapse:true
        }
    },
    methods:{
        sendMsg(){
             //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
             this.$emit('func',this.msg)
         },
         
         isCollapseSet(){
             bus.$emit('setIsCollapse',this.isCollapse = !this.isCollapse )
         }
    }
}
</script>

<style lang="scss" scoped>
header{
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}

.l-content{
    display: flex;
    align-items: center;
    .el-button{
        margin-right: 20px;
    }
}

.r-content img{
    width: 40px;
    height: 40px;
    border-radius: 50;
}
</style>